<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度一下，你就知道</title>
		<style>
			body
			{
				background-color: gainsboro;
			}
			.box
			{
				width: 800px;
				height: 400px;
				margin: 200px auto;
				border-radius: 10px;
				background-color: white;
				box-shadow: 0 0 10px rgba(0, 0, 0, 1);
			}
			.image
			{
				width: 400px;
				height: 320px;
				border-bottom: 1px solid #EBEBEB;
				margin-top: 30px;
			}
			.Login
			{
				width: 400px;
				height: 320px;
				border-bottom: 1px solid #EBEBEB;
				margin-top: 30px;
				border-left: 1px solid #EBEBEB;
			}
			#img1
			{
				width: 110px;
				height: 35px;
				margin-left: 30px;
			}
			#img2
			{
				width: 150px;
				height: 150px;
				margin-left: 30px;
				padding: 5px;
				border: 1px solid darkgray;
				border-radius: 10px;
			}
			#img3
			{
				width: 130px;
				height: 162px;
				margin-left: 30px;
			}
			.image p label
			{
				font-size: 20px;
				margin-left: 90px;
			}
			.image p a
			{
				text-decoration: none;
				background-color: #f0f0f0;
				color: #4e6ef2;
				padding: 7px;
				border-radius: 10px;
				margin-left: 135px;
			}
			.image p a img
			{
				width: 20px;
				height: 20px;
				position: relative;
				top: 5px;
			}
			.Login span
			{
				font-size: 1.25rem;
				font-weight: bold;
				margin-left: 1.875rem;
				border-bottom: 3px solid #4e6ef2;
				padding: 3px;
			}
			.Login label
			{
				font-size: 1.25rem;
				color: #949494;
				margin-left: 2.5rem;
			}
			form
			{
				margin-top: 50px;
				margin-left: 30px;
			}
			input
			{
				width: 300px;
				height: 30px;
				padding: 5px 7px;
				border-radius: 8px;
				border: 1px solid darkgray;
				outline: none;
			}
			intput:focus
			{
				border: 1px solid #4e6ef2;
				box-shadow: 0 0 0 3px rgba(78, 110, 242, 2);
			}
			#password
			{
				color: #4e6ef2;
				text-decoration: none;
				margin-left: 250px;
			}
			button
			{
				width: 320px;
				height: 45px;
				background-color: #4e6ef2;
				border-radius: 8px;
				border: none;
				color: #ffffff;
				font-weight: bold;
				font-size: 15px;
			}
			button:hover
			{
				background-color: #4461d4;
			}
			#ys
			{
				margin-left: 60px;
			}
			#ys a
			{
				text-decoration: none;
				color: #4461d4;
			}
			.bottom
			{
				width: 100%;
				height: 40px;
			}
			#test
			{
				display: flex;
			}
			#img4
			{
				margin-left: 30px;
			}
			.bottom p a img
			{
				width: 30px;
				height: 30px;
				margin-left: 15px;
				margin-top: -5px;
			}
			#add
			{
				text-decoration: none;
				color: #4e6ef2;
				margin-left: 550px;
				position: relative;
				top: -10px;
			}
		</style>
	</head>
	<link rel="icon" href="E:/img/title.png">
	<body>
		<div class="box">
			<div id="test">
				<!-- 左侧登陆区域 -->
				<div class="image">
					<img src="E:/img/newloginlogo.png" alt="图片" id="img1">
					<p>
						<img src="E:/img/er.png" id="img2">
						<img src="E:/img/qrcodeLoginGuide1.png" id="img3">
					</p>
					<p>
						<label>请使用百度APP扫码登陆</label>
					</p>
					<p>
						<a href="https://mo.baidu.com/wuxian/?from=pass"><img src="E/img/baidu-download-icon.png">下载百度APP</a>
					</p>
				</div>
				<!-- 右侧登陆区域 -->
				<div class="Login">
					<span>账号登陆</span>
					<label>短信登陆</label>
					<!-- from表单   action  与超链接的href -->
					<form action="success.html" method="get">
						<p><input type="text" placeholder="手机号/用户名/邮箱"></p>
						<p><input type="password" placeholder="密码"></p>
						<p><a href="#" id="password">忘记密码</a></p>
						<p><button type="submit">登录</button></p>
					</form>
					<p id="ys">阅读并接受<a href="#">百度用户协议</a><a href="#">隐私协议</a></p>
				</div>
			</div>
			<!-- 最下侧 -->
			<div class="bottom">
				<p>
					<a href=""><img src="E:/img/WB.png" id="img4"></a>
					<a href=""><img src="E:/img/VX.png"></a>
					<a href=""><img src="E:/img/QQ-circle-fill.png"></a>
					<a href="" id="add">立即注册</a>
				</p>
			</div>
		</div>
	</body>
</html>